import * as React from 'react';
import Icon from '@ant-design/icons';
import { Anchor } from 'antd';
import classnames from 'classnames';
import './index.less';

const { useState } = React;
const svg = () => (
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
    <path
      d="M234.633 411.443V158.515L505.719 0l271.224 158.447v245.692L1024 548.59v316.894L752.845 1024 512 883.234 271.155 1024 0 865.485V548.523l234.564-137.148 0.069 0.068z m29.832 89.156L92.228 601.361v210.193l179.678 105.2 179.746-105.132V610.1L264.465 500.6z m63.693-88.268l183.296 107.11 171.554-100.215v-205.62L505.583 109.91 328.158 213.606v198.725z m426.735 84.377L572.416 603.136v209.306L753.254 918.05l180.907-105.608v-211.08L754.893 496.707z"
      p-id="837"
    ></path>
  </svg>
);
const Svg1 = (props: any) => <Icon component={svg} {...props} />;

const dfIcon = () => (
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
    <path
      d="M192 640l384 0c12.8 0 21.333333-8.533333 21.333333-21.333333 0-12.8-8.533333-21.333333-21.333333-21.333333L192 597.333333c-12.8 0-21.333333 8.533333-21.333333 21.333333C170.666667 631.466667 179.2 640 192 640zM938.666667 170.666667 85.333333 170.666667c-23.466667 0-42.666667 19.2-42.666667 42.666667l0 597.333333c0 23.466667 19.2 42.666667 42.666667 42.666667l853.333333 0c23.466667 0 42.666667-19.2 42.666667-42.666667L981.333333 213.333333C981.333333 189.866667 962.133333 170.666667 938.666667 170.666667zM938.666667 810.666667 85.333333 810.666667 85.333333 469.333333l853.333333 0L938.666667 810.666667zM938.666667 298.666667 85.333333 298.666667l0-85.333333 853.333333 0L938.666667 298.666667zM746.666667 725.333333l85.333333 0c12.8 0 21.333333-8.533333 21.333333-21.333333l0-85.333333c0-12.8-8.533333-21.333333-21.333333-21.333333l-85.333333 0c-12.8 0-21.333333 8.533333-21.333333 21.333333l0 85.333333C725.333333 716.8 733.866667 725.333333 746.666667 725.333333zM192 725.333333l298.666667 0c12.8 0 21.333333-8.533333 21.333333-21.333333 0-12.8-8.533333-21.333333-21.333333-21.333333L192 682.666667c-12.8 0-21.333333 8.533333-21.333333 21.333333C170.666667 716.8 179.2 725.333333 192 725.333333z"
      p-id="1195"
    ></path>
  </svg>
);
export const SvgSp = (props: any) => <Icon component={dfIcon} {...props} />;

export interface AnchorPanelProps {
  anchorList: any[];
}
const handleClick = (
  e: React.MouseEvent<HTMLElement>,
  // link: {
  //   title: React.ReactNode;
  //   href: string;
  // },
) => {
  e.preventDefault();
  // console.log(link);
};
const AnchorPanel: React.SFC<AnchorPanelProps> = ({ anchorList }) => {
  const [active, setActive] = useState(false);
  const toggleActive = () => {
    setActive(!active);
  };
  return (
    <div
      className={classnames('anchor-content', {
        active,
      })}
    >
      <Anchor
        className="anchor-infi"
        offsetTop={106}
        style={{}}
        affix={false}
        onClick={handleClick}
      >
        {anchorList.map((item: any) => (
          <Anchor.Link href={`#${item.code}`} title={item.label} key={item.code} />
        ))}
      </Anchor>
      <div
        className="anchor-op-btn"
        onClick={() => {
          toggleActive();
        }}
      >
        <Svg1 />
      </div>
    </div>
  );
};

export default AnchorPanel;
